{
	template:`
	<a-page-header :title="title">
		<template #extra>
		<a-popover placement="leftTop" :visible="loadShow">
			<a-upload v-if="oper=='edit'" :show-upload-list="false" accept="image/*" v-model:file-list="updataList" @change="uploadChange" :multiple="true" :action="'action/manage/imageInfo/uploadBusiImage?imageType='+imageType+'&businessOid='+businessOid">
				<a-button type="primary" :loading="loadShow" :disabled="loadShow">上传</a-button>
			</a-upload>
			<template #content>
				<div v-for="item in updataList">
					{{item.name}}
					<a-progress :percent="item.percent" />
				</div>
			</template>
		</a-popover>
		    <m-back v-if="param.openType=='MODAL'||param.openType=='PAGE'||param.openType=='DRAWER'" @click="back(false);">关闭</m-back>
		</template>
		<a-card :hoverable="true" :bodyStyle="{padding:'10px'}">
		    <a-row type="flex" :gutter="[8,8]" align="middle">
		        <a-col v-for="item in list" flex="136px">
		            <img :src="item.thumPath" @click="viewImage(item)" style="width:100%;"/>
		            <div v-if="oper=='edit'&&admin.oid==item.imageAdmin.oid" style="margin-top:-30px;text-align:right;padding:3px;">
                        <a-popconfirm placement="topRight" title="确定要删除吗?" @confirm="deleteFile(item)">
                            <a-button size="small" type="primary" danger>删除</a-button>
                        </a-popconfirm>
                    </div>
		        </a-col>
		        <a-col v-if="isHas" flex="1"><a-button type="link" block @click="loadList">加载更多</a-button></a-col>
		        <a-col v-if="list.length==0" flex="1"><div style="line-height:2;">暂无图片</div></a-col>
		    </a-row>
		</a-card>
	</a-page-header>
	`,
	props: ['localeZh','param','parentVue'],
	data:function(){
		return {
			title:'',
			imageType:'',
			businessOid:'',
			oper:'',//edit view
			updataList:[],
			admin:{},
			page:{index:0,num:10},
			isHas:true,
			list:[],
			loadShow:false,
			loadTimer:null,
		};
	},
	mounted(){
		this.title=this.param.title||'图片';
		this.imageType=this.param.imageType||'';
		this.businessOid=this.param.businessOid||'';
		this.oper=this.param.oper||'';
		this.page.num=this.param.pageNum||10;
		this.loadList();
	},
	methods:{
		uploadChange:function(obj){
			if(obj.file.status=="done"){
				var json=JSON.parse(obj.file.xhr.response);
				if(!this.isHas){
                    this.list.push(json.model);
                    this.page.index++;
				}
			}
			if(obj.fileList.length){
				var b=false;
				for(var i=0;i<obj.fileList.length;i++){
					if(obj.fileList[i].status!='done'){
						b=true;
					}
				}
				if(b){
					this.loadShow=b;
				}else{
					if(null!=this.loadTimer) clearTimeout(this.loadTimer);
					this.loadTimer=setTimeout(()=>{
						this.loadShow=b;
						this.updataList=[];
					},1500);
				}
			}
		},
		loadList:function(){
			this.requestData('action/manage/imageInfo/getBusiImage',
				{imageType:this.imageType,businessOid:this.businessOid,page:this.page},
				data=>{
					if(!data.code){
					    if(data.list.length<this.page.num) this.isHas=false;
					    else {
					        this.isHas=true;
					        this.page.index+=data.list.length;
					    }
					    for(let i=0;i<data.list.length;i++){
						    this.list.push(data.list[i]);
					    }
						this.admin=data.admin;
					}else{
						this.$message.error(data.msg);
					}
				}
			);
		},
		removeData:function(oid){
			for(var i=0;i<this.list.length;i++){
				if(this.list[i].oid==oid){
					this.list.splice(i,1);
					break;
				}
			}
		},
		deleteFile:function(item){
			this.requestData("action/manage/imageInfo/deleteBusiImage",{"imageOid":item.oid,"businessOid":this.businessOid},
                function(data){
                    if(data.code==0){
                        this.$message.success(data.msg);
                        this.removeData(data.oid);
                        this.page.index--;
                    }else{
                        this.$message.error(data.msg)
                    }
                }.bind(this)
			);
		},
	}
}